<template>
<div :class="$style.container">
 <div :class="$style.line" style="height:8px;"></div>
 <group :gutter="0" title="支付方式">
   <cell>
     <div slot="title">
       <i :class="[$style.pay, 'iconfont','icon-iconfontrectangle390',$style.zhifubao]"></i>
       <span :class="$style.text">支付宝</span>
     </div>
     <div @click.stop="handleZhiFuBaoClick">
       <i v-if="payMethod ==='zfbPay'" :class="['iconfont', 'icon-selected-copy',$style.icon,$style.select]"/>
       <i v-else :class="['iconfont', 'icon-weixuanzhong',$style.icon]"/>
     </div>
   </cell>
   <cell>
     <div slot="title">
       <i :class="[$style.pay, 'iconfont','icon-weixin',$style.wechat]"></i>
       <span :class="$style.text">微信支付</span>
     </div>
     <div @click.stop="handleWechatClick">
       <i v-if="payMethod ==='wxPay'" :class="['iconfont', 'icon-selected-copy',$style.icon,$style.select]"/>
       <i v-else :class="['iconfont', 'icon-weixuanzhong',$style.icon]"/>
     </div>
   </cell>
 </group>
</div>
</template>

<script>
import { Group, Cell } from 'vux'
export default {
  data () {
    return {
      payMethod: 'zfbPay'
    }
  },
  components: {
    Group,
    Cell
  },
  methods: {
    handleZhiFuBaoClick () {
      this.payMethod = 'zfbPay'
      this.$emit('pay', this.payMethod)
    },
    handleWechatClick () {
      this.payMethod = 'wxPay'
      this.$emit('pay', this.payMethod)
    }
  }
}
</script>

<style lang='less' module>
.container {
  .line {
    background: #f3f5f7;
  }
  .text {
    color: #2B333B;
    font-size:16px;
    line-height:30px;
  }
  .pay {
    margin-right:12px;
    font-size:30px;
    vertical-align: middle;
  }
  .zhifubao {
    color:#00a6f8;
    background: #fff;
  }
  .wechat {
    color:#00bd00;
    background: #fff;
  }
  .icon {
    font-size:20px;
  }
  .select {
    color:#20CC85;
  }
}
</style>
